<{include file="v2/header.html"}>
<main class="pt-24 pb-16 bg-paper min-h-screen">
    <section class="container mx-auto px-4">
        <div class="scroll-reveal">
            <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">古今对话</h1>
            <p class="text-lightink max-w-2xl mb-8">与古代诗人"面对面"交流，探寻他们创作背后的故事与心境</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 左侧：诗人选择 -->
            <div class="lg:col-span-1">
                <div class="bg-ink/5 rounded-2xl p-6 h-full">
                    <h3 class="text-lg font-song font-bold mb-4">选择诗人</h3>
                    <div class="space-y-3">
                        <!-- 诗人列表会通过JS动态加载 -->
                    </div>
                </div>
            </div>
            
            <!-- 右侧：对话区域 -->
            <div class="lg:col-span-3">
                <div class="bg-ink/5 rounded-2xl p-6 h-full flex flex-col">
                    <div id="poetInfo" class="mb-6 p-4 bg-white rounded-lg hidden">
                        <div class="flex items-start">
                            <img id="poetAvatar" src="" alt="" class="w-20 h-20 rounded-full object-cover mr-4">
                            <div>
                                <h3 id="poetName" class="text-xl font-song font-bold"></h3>
                                <p id="poetDynasty" class="text-lightink text-sm mb-2"></p>
                                <p id="poetIntro" class="text-sm line-clamp-3"></p>
                            </div>
                        </div>
                    </div>
                    
                    <div id="chatContainer" class="flex-1 overflow-y-auto mb-6 p-4 bg-white rounded-lg" style="min-height: 400px;">
                        <div class="text-center text-lightink py-8">
                            请选择一位诗人开始对话
                        </div>
                    </div>
                    
                    <div class="flex gap-3">
                        <input type="text" id="messageInput" placeholder="输入你想对诗人说的话..." 
                            class="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar">
                        <button id="sendMessage" class="bg-cinnabar text-rice px-6 py-3 rounded-lg hover:bg-opacity-90 transition-colors disabled:opacity-50" disabled>
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<{include file="v2/footer.html"}>

<script>
let selectedPoetId = null;

// 加载诗人列表
function loadPoets() {
    fetch('/index.php?c=main&a=getAuthorsList')
        .then(response => response.json())
        .then(data => {
            if (data.code === 1) {
                const container = document.querySelector('.space-y-3');
                data.list.forEach(poet => {
                    const poetEl = document.createElement('div');
                    poetEl.className = 'poet-item p-3 border border-gray-300 rounded-lg hover:bg-ink/5 cursor-pointer transition-colors';
                    poetEl.innerHTML = `
                        <div class="flex items-center">
                            <img src="${poet.pic || 'https://picsum.photos/40/40?random=' + poet.id}" alt="${poet.title}" class="w-10 h-10 rounded-full object-cover mr-3">
                            <div>
                                <div class="font-medium">${poet.title}</div>
                                <div class="text-xs text-lightink">${poet.dynasty}</div>
                            </div>
                        </div>
                    `;
                    poetEl.addEventListener('click', () => selectPoet(poet));
                    container.appendChild(poetEl);
                });
            }
        });
}

// 选择诗人
function selectPoet(poet) {
    selectedPoetId = poet.id;
    
    // 更新选中状态
    document.querySelectorAll('.poet-item').forEach(el => {
        el.classList.remove('border-cinnabar', 'bg-cinnabar/10');
        el.classList.add('border-gray-300');
    });
    event.currentTarget.classList.add('border-cinnabar', 'bg-cinnabar/10');
    event.currentTarget.classList.remove('border-gray-300');
    
    // 显示诗人信息
    document.getElementById('poetAvatar').src = poet.pic || 'https://picsum.photos/80/80?random=' + poet.id;
    document.getElementById('poetName').textContent = poet.title;
    document.getElementById('poetDynasty').textContent = poet.dynasty;
    document.getElementById('poetIntro').textContent = poet.intro || '暂无介绍';
    document.getElementById('poetInfo').classList.remove('hidden');
    
    // 清空聊天记录并启用输入
    document.getElementById('chatContainer').innerHTML = `
        <div class="message poet-message mb-4">
            <div class="flex items-start">
                <img src="${poet.pic || 'https://picsum.photos/40/40?random=' + poet.id}" alt="${poet.title}" class="w-8 h-8 rounded-full object-cover mr-2">
                <div class="bg-cinnabar/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                    <p class="font-medium text-sm mb-1">${poet.title}</p>
                    <p>你好！我是${poet.title}，很高兴能与你交流诗词之道。</p>
                </div>
            </div>
        </div>
    `;
    document.getElementById('sendMessage').disabled = false;
    document.getElementById('messageInput').focus();
}

// 发送消息
function sendMessage() {
    const message = document.getElementById('messageInput').value.trim();
    if (!message || !selectedPoetId) return;
    
    // 添加用户消息
    const chatContainer = document.getElementById('chatContainer');
    chatContainer.innerHTML += `
        <div class="message user-message mb-4 text-right">
            <div class="inline-block bg-ink text-rice p-3 rounded-lg rounded-tr-none max-w-[80%]">
                <p>${message}</p>
            </div>
        </div>
    `;
    
    // 清空输入框
    document.getElementById('messageInput').value = '';
    // 滚动到底部
    chatContainer.scrollTop = chatContainer.scrollHeight;
    
    // 显示正在输入
    chatContainer.innerHTML += `
        <div class="message poet-message mb-4" id="typingIndicator">
            <div class="flex items-start">
                <img src="${document.getElementById('poetAvatar').src}" alt="${document.getElementById('poetName').textContent}" class="w-8 h-8 rounded-full object-cover mr-2">
                <div class="bg-cinnabar/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                    <p class="font-medium text-sm mb-1">${document.getElementById('poetName').textContent}</p>
                    <p>正在思考...</p>
                </div>
            </div>
        </div>
    `;
    chatContainer.scrollTop = chatContainer.scrollHeight;
    
    // 发送请求获取回复
    fetch('/index.php?c=main&a=getPoetResponse', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'poet_id=' + selectedPoetId + '&message=' + encodeURIComponent(message)
    })
    .then(response => response.json())
    .then(data => {
        // 移除正在输入提示
        document.getElementById('typingIndicator').remove();
        
        if (data.code === 1) {
            // 添加诗人回复
            chatContainer.innerHTML += `
                <div class="message poet-message mb-4">
                    <div class="flex items-start">
                        <img src="${document.getElementById('poetAvatar').src}" alt="${document.getElementById('poetName').textContent}" class="w-8 h-8 rounded-full object-cover mr-2">
                        <div class="bg-cinnabar/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                            <p class="font-medium text-sm mb-1">${document.getElementById('poetName').textContent}</p>
                            <p>${data.response}</p>
                        </div>
                    </div>
                </div>
            `;
        } else {
            chatContainer.innerHTML += `
                <div class="message poet-message mb-4">
                    <div class="flex items-start">
                        <img src="${document.getElementById('poetAvatar').src}" alt="${document.getElementById('poetName').textContent}" class="w-8 h-8 rounded-full object-cover mr-2">
                        <div class="bg-cinnabar/10 p-3 rounded-lg rounded-tl-none max-w-[80%]">
                            <p class="font-medium text-sm mb-1">${document.getElementById('poetName').textContent}</p>
                            <p>抱歉，我不太明白你的意思，可以换个话题吗？</p>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // 滚动到底部
        chatContainer.scrollTop = chatContainer.scrollHeight;
    });
}

// 事件监听
document.getElementById('sendMessage').addEventListener('click', sendMessage);
document.getElementById('messageInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// 页面加载时获取诗人列表
window.onload = loadPoets;
</script>